<template>
  <div :class="['subPage']">
    <div>
        <nav-bar 
        :title="navTitle" 
        position="center" 
        color='linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%)' 
        :rowColor="'white'" 
        :goBack="goBack" 
        :isMsg='false' 
        fontColor='#fff' ></nav-bar>
    </div>
    <div class="mainContent" >
       <span class="flexItem" v-for="item in deptList" :key="item.dept_id" @click="goBookingPage(item)">
         <div class="imgBox" >
           <img :src="item.dept_img_url" alt="">
         </div>
         <div class="descBox" >{{item.dept_name}}</div>
       </span>
    </div>
    <i-toast id="toast" /> 
  </div>
</template>
<script>
  let app = getApp()
  import api from '@/api/api'
  import navBar from '@/components/navBar'
  const {
    $Toast,
    $Message
  } = require('../../../../../../static/iview/base/index')
  import * as types from '@/store/types'
  import { mapState } from 'vuex'
  import nim from '@/utils/nim'
  export default {
    computed: {
      ...mapState([
        'ifIphonex', 'talkInfo'
      ])
    },
    components: {
      navBar
    },
    data() {
      return {
        navTitle: '专科开药',
        deptInfo: {},
        deptList: [],
        showModal: true
      }
    },
    onLoad (options) {
      Object.assign(this.$data, this.$options.data())
      this.deptInfo = JSON.parse(options.data)
      this.getDeptList()
    },
    onShow () {
      this.navTitle = '专科开药'
    },
    onUnload() {
    },
    methods: {
      // 路由反馈函数
      goBack () {
        this.$router.go(-1)
      },
      getDeptList () {
        this.$api.prescriptDeptLit({ parent_id: this.deptInfo.dept_id }, { showLoading: true }).then(res=>{
          this.deptList = res.data
        })
      },
      goBookingPage(item) {
        var token = this.$storage.getToken();
        if(!token) {
          this.$utils.showToast("text", "请先登录");
          setTimeout(() => {
            this.$router.push("/pages/center/child/login/main");
          }, 300);
          return
        }
        this.$router.push(`/pages/subPage/register/prescriptArea/bookingOrder/main?data=${JSON.stringify(item)}`)
      }
    }
  }
</script>
<style scoped lang='less'>
  .subPage {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background: #F9F9F9;
  }
  .mainContent {
    flex: 1;
    overflow-x: hidden;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content:flex-start; // 取消子元素垂直的间隙
    .flexItem {
      margin: 18rpx 0 0 30rpx;
      display: inline-block;
      width: 210rpx;
      height: 210rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      border: 1px solid #DDDDDD;
      text-align: center;
      color: #4B7AEA;
      font-size: 40rpx;
      box-sizing: border-box;
      padding: 0 24rpx;
      .imgBox {
        margin-top: 32rpx;
        img {
          height: 70rpx;
          width: 70rpx;
        }
      }
      .descBox {
        margin-top: 10rpx;
        width: 100%;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
      }
    }
  }
.modalClass {
  position: absolute;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 9;
  // background:rgba(0,0,0,1);
  // opacity:0.6;
  .modalBox {
    position: relative;
    // width: 670rpx;
    height: 920rpx;
    z-index: 99;
    background: #ffffff;
    border-radius: 12px;
    margin: 0 65rpx;
    .dialog_close {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      top: -30rpx;
      right: -30rpx;
    }
    .modalTit {
      width: 100%;
      img {
        width: 100%;
        height: 220rpx;
      }
    }
    .modalCenter {
      padding: 27rpx 35rpx 13rpx 35rpx;
      display: flex;
      flex-direction: column;
      height: 55%;
      overflow-y: scroll;
      &::-webkit-scrollbar-track-piece {
        background-color: rgba(0, 0, 0, 0);
        border-left: 1px solid rgba(0, 0, 0, 0);
      }
      &::-webkit-scrollbar {
        width: 8rpx;
        height: 13rpx;
        -webkit-border-radius: 5rpx;
        -moz-border-radius: 5rpx;
        border-radius: 5rpx;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #bbbbbb;
        background-clip: padding-box;
        -webkit-border-radius: 5rpx;
        -moz-border-radius: 5rpx;
        border-radius: 5rpx;
        min-height: 28px;
      }
      &::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-border-radius: 5rpx;
        -moz-border-radius: 5rpx;
        border-radius: 5rpx;
      }
      .dataBox {
        margin-bottom: 20rpx;
        span {
          display: inline-block;
          font-size: 30rpx;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          vertical-align: top;
        }
        .itemPie {
          width: 12rpx;
          height: 12rpx;
          background: rgba(74, 100, 234, 1);
          border-radius: 50%;
          margin-right: 15rpx;
          margin-top: 13rpx;
          // vertical-align: middle;
          // margin-bottom: 5rpx;
        }
        .itemSpan {
          width: 100%;
          margin: 10rpx 0;
        }
        .itemColor {
          color: #fb4141;
        }
        .itemSpan2 {
          font-weight: bold;
        }
      }
    }
    .btnBomBlue{
      display: flex;
      justify-content: space-between;
      padding: 32rpx 37rpx;
      .modalFooterBtn{
        text-align: center;
        font-size:36rpx;
        font-weight:400;
        padding: 17rpx 0rpx;
        width: 257rpx;
        border-radius:4rpx;
      }
      .leftBtn{
        color: #4A71E8;
        background:rgba(255,255,255,1);
        border: 1rpx solid rgba(160,183,237,1);
      }
      .rightBtn{
        color:#FFFFFF;
        background:linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%);
        margin-left: 25rpx;
      }
    }
    .modalFooter {
      position: relative;
      top: 40rpx;
      // width:544rpx;
      height: 76rpx;
      background: rgba(74, 100, 234, 1);
      border-radius: 38rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      margin: 0 37rpx 63rpx 37rpx;
      line-height: 76rpx;
      text-align: center;
    }
    .btnDis {
      background: #c5c8ce;
    }
  }
}
</style>
